<template>
  <div class="eip-view">
    <div class="header">
      <div class="top">
        <div class="left">
          <img src="@/assets/images/clientIcon.png" width="70px" height="70px" alt />
          <p class="title" v-text="models.model.name"></p>
          <div class="custom-tag" v-for="item in viewTags" :key="item">
            <span v-text="item"></span>
          </div>
        </div>
        <div class="right">
          <el-button-group>
            <el-button @click="editView()" size="small">
              <i class="fa fa-pencil"></i>
              <span>编辑</span>
            </el-button>
            <el-button @click="addView()" size="small">
              <i class="fa fa-plus"></i>
              <span>新增</span>
            </el-button>
          </el-button-group>
        </div>
      </div>
      <div class="bottom">
        <div class="form-item">
          <dd>客户编码</dd>
          <dl v-text="models.model.code"></dl>
        </div>
        <div class="form-item">
          <dd>客户电话</dd>
          <dl v-text="models.model.telephone"></dl>
        </div>
        <div class="form-item">
          <dd>客户标签</dd>
          <dl v-if="models.model.tags != null" v-text="models.model.tags"></dl>
          <dl v-else v-text="models.model.tags"></dl>
        </div>
        <div class="form-item">
          <dd>状态</dd>
          <dl v-text="models.model.status"></dl>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-left">
        <el-tabs v-model="activeName" type="card" stretch>
          <el-tab-pane label="资料" name="ziLiao">
            <div class="nav zi-liao">
              <div class="form-view">
                <div class="form-row">
                  <dl>
                    <label>客户名称：</label>
                    <span v-text="models.model.name"></span>
                  </dl>
                  <dl>
                    <label>客户编码：</label>
                    <span v-text="models.model.code"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>客户电话：</label>
                    <span v-text="models.model.telephone"></span>
                  </dl>
                  <dl>
                    <label>统一社会信用代码：</label>
                    <span v-text="models.model.socialCode"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl>
                    <label>开户银行：</label>
                    <span v-text="models.model.bankDeposit"></span>
                  </dl>
                  <dl>
                    <label>银行账号：</label>
                    <span v-text="models.model.deposit"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl style="width: 100%">
                    <label>单位地址：</label>
                    <span v-text="models.model.adrress"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl style="width: 100%">
                    <label>自定义标签：</label>
                    <span v-text="models.model.tags"></span>
                  </dl>
                </div>
                <div class="form-row">
                  <dl style="width: 100%">
                    <label>备注：</label>
                    <span v-text="models.model.memo" style="line-height: 30px"></span>
                  </dl>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'联系人(' + contactList.length + ')'" name="lianXiRen">
            <div class="nav lianXiRen">
              <el-table :data="contactList">
                <el-table-column prop="managerName" label="客户经理"></el-table-column>
                <el-table-column prop="name" label="联系人姓名"></el-table-column>
                <el-table-column prop="mobile" label="联系人手机"></el-table-column>
                <el-table-column prop="departName" label="联系人部门"></el-table-column>
                <el-table-column prop="position" label="联系人职位"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="
                        handleView(
                          scope.row.contactId,
                          'contactId',
                          'CustomerContactForm'
                        )
                      "
                    >查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'商机(' + chanceList.length + ')'" name="shangJi">
            <div class="nav shangJi">
              <el-table :data="chanceList">
                <el-table-column prop="title" label="商机标题"></el-table-column>
                <el-table-column prop="customerName" label="客户负责人"></el-table-column>
                <el-table-column prop="sales" label="客户经理"></el-table-column>
                <el-table-column label="项目预算">
                  <template slot-scope="scope">
                    <span v-text="scope.row.budget"></span>元
                  </template>
                </el-table-column>
                <el-table-column label="合同毛利">
                  <template slot-scope="scope">
                    <span v-text="scope.row.contractBenefit"></span>元
                  </template>
                </el-table-column>
                <el-table-column label="项目状态">
                  <template slot-scope="scope">
                    <span v-text="scope.row.posibility"></span>%
                  </template>
                </el-table-column>
                <el-table-column label="预计投标时间">
                  <template slot-scope="scope">
                    <span v-text="scope.row.tenderTime.slice(0,10)"></span>
                  </template>
                </el-table-column>
                <el-table-column label="预计签合同时间" width="120">
                  <template slot-scope="scope">
                    <span v-text="scope.row.signContractDate.slice(0,10)"></span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="
                        handleView(
                          scope.row.chanceId,
                          'chanceId',
                          'CustomerChanceForm'
                        )
                      "
                    >查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="'合同(' + contractList.length + ')'" name="heTong">
            <div class="nav heTong">
              <el-table :data="contractList">
                <el-table-column prop="code" label="合同编号"></el-table-column>
                <el-table-column prop="name" label="合同名称"></el-table-column>
                <el-table-column prop="amount" label="合同金额"></el-table-column>
                <el-table-column prop="signDate" label="签订时间"></el-table-column>
                <el-table-column prop="bigType" label="合同大类"></el-table-column>
                <el-table-column prop="smallType" label="合同小类"></el-table-column>
                <el-table-column prop="saleName" label="销售人员"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="
                        handleView(
                          scope.row.contractId,
                          'contractId',
                          scope.row.bigType == '采购合同'
                            ? 'purchaseContractForm'
                            : 'ContractForm'
                        )
                      "
                    >查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <!--
          <el-tab-pane :label="'项目(' + projectList.length + ')'" name="xiangMu">
            <div class="nav xiangMu">
              <el-table :data="projectList">
                <el-table-column prop="projectCode" label="项目编号"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column prop="projectType" label="项目类型"></el-table-column>
                <el-table-column prop="projectStatus" label="项目状态"></el-table-column>
                <el-table-column prop="pmWorkload" label="工作量（天）"></el-table-column>
                <el-table-column prop="projectManager" label="项目经理"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleViewProject(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>-->
          <el-tab-pane :label="'文档(' + fileList.length + ')'" name="wenDang">
            <div class="nav wenDang">
              <el-upload
                class="upload-file"
                action="/eip/contractProject/uploadfile"
                :http-request="uploadFile"
                :show-file-list="false"
                multiple
              >
                <el-button type="primary" class="el-icon-upload" size="small">点击上传</el-button>
                <span>（文件大小不超过50M）</span>
              </el-upload>
              <el-table :data="fileList">
                <el-table-column prop="name" label="文件名"></el-table-column>
                <el-table-column prop="size" label="文件大小（字节）"></el-table-column>
                <el-table-column prop="type" label="文件类型"></el-table-column>
                <el-table-column prop="uploaderName" label="上传者"></el-table-column>
                <el-table-column prop="uploadTime" label="上传时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="onPreview(scope.row)" size="small">下载</el-button>
                    <el-button type="danger" @click="beforeRemove(scope.row)" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="main-right">
        <el-tabs v-model="activeNameRight" type="card">
          <el-tab-pane label="拜访记录" name="activity">
            <div class="nav activity">
              <div class="top">
                <a @click="newFollow()">
                  <i class="el-icon-plus"></i>新建拜访记录
                </a>

                <el-select v-model="inputSelect" placeholder="请选择" clearable size="small">
                  <el-option
                    v-for="item in activityOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>

                <el-input
                  placeholder="请输入关键字"
                  prefix-icon="el-icon-search"
                  v-model="inputSearch"
                  clearable
                  size="small"
                ></el-input>
              </div>
              <div class="article">
                <div class="tis" v-show="followOptions.length < 1">暂无数据</div>
                <el-timeline>
                  <el-timeline-item
                    v-for="item in followOptions"
                    :timestamp="formatTime(item.followDate)"
                    placement="top"
                    icon="el-icon-more"
                    size="large"
                    color="#0bbd87"
                    type="success"
                    :key="item.followId"
                  >
                    <el-card>
                      <el-collapse class="article-collapse">
                        <el-collapse-item>
                          <template slot="title">
                            <img src="@/assets/images/profile.png" />
                            <span v-text="item.sales"></span>
                            <span v-text="item.title"></span>
                          </template>
                          <div>
                            <div class="aside">
                              <dl>
                                <dt>客户联系人姓名：</dt>
                                <dd v-text="item.customers"></dd>
                              </dl>
                              <dl>
                                <dt>活动记录内容：</dt>
                                <dd v-text="item.content"></dd>
                              </dl>
                              <dl>
                                <dt>更新时间：</dt>
                                <dd v-text="item.updatedDate"></dd>
                              </dl>
                              <el-row type="flex" justify="end">
                                <el-button
                                  @click="editFollow(item.followId)"
                                  type="primary"
                                  icon="el-icon-edit"
                                  size="mini"
                                  circle
                                ></el-button>
                                <el-button
                                  @click="deleteFollow(item)"
                                  type="danger"
                                  icon="el-icon-delete"
                                  size="mini"
                                  circle
                                ></el-button>
                              </el-row>
                            </div>
                          </div>
                        </el-collapse-item>
                      </el-collapse>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { init } from "echarts";
export default {
  data() {
    return {
      activeName: "ziLiao",
      activeNameRight: "activity",
      inputSearch: "",
      inputSelect: "",
      activityOptions: [
        {
          value: "7",
          label: "最近7天",
        },
        {
          value: "3",
          label: "最近3天",
        },
        {
          value: "1",
          label: "最近1天",
        },
      ],
      models: {
        model: {},
      },
      viewTags: [],
      contactList: [],
      chanceList: [],
      contractList: [],
      projectList: [],
      fileList: [],
      followList: [],
      followOptions: [],
    };
  },
  methods: {
    handleViewProject(row) {
      let type;
      switch (row.projectCategory) {
        case "devOpsProject":
          type = "DevOpsProjectForm";
          break;
        case "deptProject":
          type = "DeptProjectForm";
          break;
        case "development":
          type = "ProjectForm";
          break;
      }
      this.$root.openModal(
        "/smartform/view/" + type + "?projectId=" + row.projectId
      );
    },
    handleView(value, key, type) {
      this.$root.openModal("/smartform/view/" + type + "?" + key + "=" + value);
    },
    editFollow(id) {
      this.$root.openModal(
        "/smartform/hub/CustomerFollowForm?followId=" + id,
        () => {
          this.getFollow();
        }
      );
    },
    deleteFollow(item) {
      this.$confirm("确定删除此记录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request({
          url: "/smartform/delete/CustomerFollowForm",
          method: "POST",
          data: {
            delete: [item],
          },
        }).then((r) => {
          this.getFollow();
        });
      });
    },
    getFollow() {
      request({
        url: "/eip/customerFollow/getFollowByType",
        method: "get",
        params: {
          dataKey: this.models.model.customerId,
          dataType: "customer",
        },
      }).then((r) => {
        this.followList = r.data;
        this.followOptions = r.data;
      });
    },
    editView() {
      this.$root.openModal(
        "/smartform/hub/CustomerFrom?customerId=" +
          this.models.model.customerId,
        () => {
          this.initCustomer();
        }
      );
    },
    addView() {
      this.$root.openModal("/smartform/hub/CustomerFrom");
    },
    newFollow() {
      this.$root.openModal(
        "/smartform/hub/CustomerFollowForm",
        () => {
          this.getFollow();
        },
        {
          dataKey: this.models.model.customerId,
          dataType: "customer",
        }
      );
    },
    initCustomer() {
      request({
        url: "/eip/customer/getCustomerById",
        method: "get",
        params: { customerId: this.$route.query.id },
      }).then((r) => {
        this.models.model = r.customer;
        this.contactList = r.contacts;
        this.fileList = r.fileList;
        this.viewTags = r.customer.tags.split(",");
        this.followList = r.follows;
        this.followOptions = r.follows;
        this.chanceList = r.chances;
        this.contractList = r.contracts;
      });
    },
    getProject() {
      let contractIds = new Array();
      for (const item of this.contractList) {
        contractIds.push(item.contractId);
      }
      request({
        url: "eip/contractProject/getProject",
        method: "get",
        params: {
          contractIds: contractIds + "",
        },
      }).then((r) => {
        this.projectList = r;
      });
    },
    uploadFile: function (param) {
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("editormd-image-file", fileObj);
      form.append("id", this.models.model.customerId);
      var self = this;
      request({
        url: param.action,
        method: "POST",
        data: form,
      }).then((res) => {
        if (res && res.success == "1") {
          var url = res.url.slice(0, res.url.lastIndexOf("."));
          self.fileList.push({
            name: res.name,
            url: url,
            type: res.type,
            size: res.size,
            uploadTime: res.uploadTime,
            uploaderName: res.uploaderName,
          });
          this.notifySuccess("上传成功");
        }
      });
    },
    beforeRemove: function (file) {
      return this.$confirm("确定要删除-->" + file.name + "吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var self = this;
        var attachmentId = file.url.slice(file.url.indexOf("down/") + 5);
        request({
          url: "/attachment/remove",
          method: "POST",
          params: { attachmentId: attachmentId },
        }).then(function (rlt) {
          if (rlt && rlt.success) {
            self.notifySuccess("已成功删除-->" + file.name);
            for (const i in self.fileList) {
              if (self.fileList[i].url.indexOf(attachmentId) > -1) {
                self.fileList.splice(i, 1);
                break;
              }
            }
            return Promise.resolve();
          } else {
            self.notifyError(rlt.message);
            return Promise.reject().catch(() => {});
          }
        });
      });
    },
    onPreview: function (file) {
      window.location.assign(this.$$server + file.url);
    },
    formatTime(time) {
      return time.split(" ")[0];
    },
    checkTime(day, date) {
      const oneTimestamp = 86400000;
      let nowTime = new Date().getTime();
      let resultCount = new Date(date).getTime() + day * oneTimestamp - nowTime;
      if (resultCount > 0) {
        return true;
      }
      return false;
    },
  },
  created() {
    this.initCustomer();
  },
  watch: {
    inputSelect: function (newVal) {
      if (!newVal) {
        this.followOptions = this.followList;
        return;
      }
      this.followOptions = _.filter(this.followList, (item) => {
        return this.checkTime(newVal, item.followDate);
      });
    },
    inputSearch: function (newVal) {
      this.followOptions = _.filter(this.followList, (item) => {
        return item.title.includes(newVal) || item.sales.includes(newVal);
      });
    },
  },
};
</script>

<style scoped>
html,
body,
#app,
.portlet,
.portlet-body,
.table-container,
.eip-view {
  height: 100%;
}

.portlet.light .portlet-body {
  padding: 0 !important;
}

body,
.eip-view {
  background-color: rgb(242, 244, 247);
}

[v-cloak] {
  display: none;
}

.header {
  width: 100%;
  height: 200px;
  padding: 10px 25px;
  background: white;
  box-shadow: 0 0 5px #b3b8be;
  min-width: 1260px;
}

.header .top {
  display: flex;
  justify-content: space-between;
}

.header .top .left {
  min-width: 300px;
  display: flex;
}

.header .top .left .title {
  font-size: 26px;
  color: #606266;
  padding: 20px;
  margin: 0;
}

.header .top .right {
  margin-top: 15px;
}
.header .bottom {
  margin: 15px 8px;
  height: 50px;
}

.header .custom-tag {
  border: 1px solid #dcdfe6;
  color: rgb(82, 185, 209);
  transition: 1s;
  font-weight: 500;
  padding: 10px 20px;
  height: 40px;
  margin: 15px 5px;
}

.header .custom-tag:hover {
  border: 1px solid #9faccb;
}

.header .form-item {
  float: left;
  min-width: 80px;
  padding: 0 85px;
}

.header .form-item dd {
  color: rgb(180 181 183);
  font-size: 14px;
}

.header .form-item dl {
  font-size: 16px;
  color: #606266;
  margin: 5px 0;
  font-weight: 600;
}

.eip-view .main {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.main-left {
  background: white;
  width: 68%;
  height: 700px;
  min-width: 860px;
  overflow: auto;
}

.main-left .nav {
  padding: 10px 5%;
}

.main-left .form-view {
  margin-top: 20px;
}

.main-left .form-view .form-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.main-left .form-view .form-row dl {
  width: 45%;
}

.main-left .form-view .form-row dl label {
  color: rgb(180 181 183);
  font-size: 14px;
}

.main-left .form-view .form-row dl span {
  font-size: 15px;
}

.main-left .nav-title {
  text-decoration: none !important;
  color: #606266;
  font-size: 16px;
  font-weight: 600;
}

.main-left .nav-title i {
  font-size: 16px;
  font-weight: 600;
  padding: 0 5px;
}
.wenDang .upload-file {
  padding: 0 0 10px;
}
.wenDang .upload-file span {
  color: rgb(180 181 183);
  margin: 0 10px;
}
.main-right {
  background: white;
  height: 700px;
  width: 30%;
  min-width: 400px;
  overflow-x: auto;
}

.main-right .activity .top {
  display: flex;
  justify-content: space-around;
}

.main-right .activity .top a {
  margin-top: 10px;
  color: #409eff;
}

.main-right .activity .top .el-select,
.main-right .activity .top .el-input {
  width: 150px;
}

.activity .article .el-timeline {
  padding: 30px 5%;
}
.activity .el-card.is-always-shadow {
  box-shadow: none;
}
.activity .article-collapse {
  border: none !important;
}
.activity .article-collapse img {
  border-radius: 50%;
  width: 40px;
  text-align: center;
}
.activity .article-collapse span {
  padding: 0 10px;
  color: #606266;
  font-weight: 600;
}
.activity .article-collapse .aside {
  padding: 30px 30px 0;
  color: #606266;
}
.activity .article-collapse .aside dl {
  display: flex;
  flex-wrap: wrap;
}
.article .tis {
  text-align: center;
  padding: 50px 0;
  color: rgb(180 181 183);
}
</style>
